<template>
  <!-- 员工卡片 -->
  <wd-card>
    <view class="p-2">
      <!-- 公司名称标题 -->
      <view class="flex flex-justify-between items-center">
        <view>
          <text class="text-gray-900 text-2xl font-bold">{{ user.companyName || user.name }}</text>
        </view>

        <wd-button type="text" icon="edit" @click="editUser">{{ user.reviewStatus.name }}</wd-button>
      </view>

      <!-- 详细信息 -->
      <view class="py-3rpx">
        <!-- 负责人 -->
        <view class="flex users-center">
          <wd-icon name="user" size="16" class="text-blue-500 mr-2"></wd-icon>
          <view class="flex-1">
            <text class="text-gray-600 mr-2">用户名称：</text>
            <text class="text-gray-900 font-medium">{{ user.username }}</text>
          </view>
        </view>

        <!-- 联系电话 -->
        <view class="py-3rpx flex users-center">
          <wd-icon name="phone" size="16" class="text-blue-500 mr-2"></wd-icon>
          <view class="flex-1">
            <text class="text-gray-600 mr-2">联系电话：</text>
            <text class="text-blue-600 font-medium">{{ user.mobile }}</text>
          </view>
        </view>

        <!-- 公司地址 -->
        <view class="flex users-start py-3rpx">
          <wd-icon name="location" size="16" class="text-blue-500 mr-2 mt-1"></wd-icon>
          <view class="flex-1">
            <text class="text-gray-600 mr-2">详细地址：</text>
            <text class="text-blue-600 font-medium">{{ getAddress(user) }}</text>
          </view>
        </view>
      </view>
    </view>
  </wd-card>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, watch, computed } from 'vue'
import { useColPickerData } from '@/hooks/useColPickerData'
import { reviewUserInfoApi } from '@/api/userInfoByType'
const { mapCodeToText } = useColPickerData()

const props = defineProps<{
  user: any
}>()

const config = computed(() => {
  if (props.user.reviewStatus === 'wait') {
    return [
      {
        name: '通过',
        code: 'pass',
        labelColor: null
      },
      {
        name: '拒绝',
        code: 'reject',
        labelColor: null
      }
    ]
  } else {
    return [
      {
        name: '离职',
        code: 'leave',
        labelColor: null
      },
      {
        name: '注销',
        code: 'cancel',
        labelColor: null
      }
    ]
  }
})

const emit = defineEmits(['edit'])
const getAddress = user => {
  if (!user.province) {
    return '未添加地址'
  }
  let data = mapCodeToText([user.province, user.city, user.district])
  return data + user.address
}
const editUser = () => {
  uni.showActionSheet({
    itemList: config.value.map(v => v.name),
    success: res => {
      // res.tapIndex
      reviewUserInfoApi({
        relationId: props.user.relationId,
        reviewStatus: config.value[res.tapIndex].code
      }).then(() => {
        uni.showToast({ title: '修改成功', icon: 'none' })
        emit('edit')
      })
    },
    fail: err => {
      console.error(err)
    }
  })
}
</script>

<style lang="scss"></style>
